<template>
	<el-select v-model="modelAsString" :placeholder="placeholder" :clearable="clearable" :multiple="ismultiple" collapse-tags>
		<el-option v-for="item in List" :key="item.code" :label="item.name" :value="item.name">{{ item.name }}</el-option>
	</el-select>
</template>

<script setup lang="ts" name="MaDictSelect">
import { getDictDataList } from '@/utils/tool'
import { useAppStore } from '@/store/modules/app'
import { computed, PropType } from 'vue'
import { multiply } from 'xe-utils'
import { is } from '@babel/types'

const appStore = useAppStore()
const props = defineProps({
	dictType: {
		type: String,
		required: true
	},
	clearable: {
		type: Boolean,
		required: false,
		default: () => false
	},
	ismultiple: {
		type: Boolean,
		required: false,
		default: () => false
	},
	placeholder: {
		type: String,
		required: false,
		default: () => ''
	},
	List: {
		type: Array as PropType<any[]>,
		required: false
	}
})

const model = defineModel<number | number[]>({
  type: [Number, Array], // 支持的类型
  default: 0, // 默认值
});
const modelAsString = computed({
	get() {
if (props.ismultiple) {
			return model.value ?? [];
		} else {
			return model.value != null ? model.value.toString() : '';
		}
	
	},
	set(value) {
		model.value = value
	}
})

const dataList = getDictDataList(appStore.dictList, props.dictType)
</script>
